<template>
	<div class="labelType w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{labelTitle}}<i v-if="this.$parent.labelType==6">管理</i></p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report"> 
				<a class="listOne" @click="newLabel">新增{{labelTitle}}</a>
				<div class="msearch">
					<input placeholder="请输入标签名称……" v-model="search"/>
					<a @click="getTableList"><img src="../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="name" label="分类名称"></el-table-column>
				<el-table-column prop="usenum" label="使用次数"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleDeleteAll" class="allDelete">批量删除</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
			<div class="bangdanWrap" v-show="label_wrap">
				<div class="bd_line">
					<span>标签名称:</span>
					<input v-model="name" placeholder="请输入标签名称"/>
				</div>
				<div class="footerButton">
					<a @click="submit">保存</a>
					<a @click="cancel" class="cancel">取消</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import alert from './Alert.vue';
	import deleteAlert from './deleteAlert.vue';
	export default{
		data(){
			return{
				nowType:'add',
				labelTitle:'',
				search:'',
				labelType:'',
				name:'',
				tableData: [],
				pagesize: 15,
				currentpage: 1,
				total: 1,
				deleteType:'delete',
				multipleSelection:[],
				label_wrap:false
			}
		},
		methods:{
			getTableList(){
				if(this.$parent.labelType==3){
					this.labelTitle = '课程标签';
				}else if(this.$parent.labelType==1){
					this.labelTitle = '用户标签';
				}else if(this.$parent.labelType==2){
					this.labelTitle = '讲师标签';
				}else if(this.$parent.labelType==6){
					this.labelTitle = '分类';
				}else if(this.$parent.labelType==7){
					this.labelTitle = '话题分类';
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/label/labelList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						rootcompanyid:1,
						page:this.currentpage,
						num:this.pagesize,
						name:this.search,
						type:this.$parent.labelType
					},
					success: res => {
						if(res.data.code == 200) { 
							this.tableData = res.data.data.list;
							this.total = res.data.data.pageParam.items;
						}
					}
				});
			},
			newLabel(){
				this.label_wrap=true;
			},
			createLabel(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/label/addLabel",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						rootcompanyid:1,
						name:this.name,
						type:this.$parent.labelType
					},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleEdit(row){
				this.nowType = 'edit';
	 			this.label_wrap = true;
	 			this.id = row.id;
	 			this.name = row.name;
			},
			updateLabel(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/label/updateLabel",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data:{
						id:this.id,
						rootcompanyid:1,
						name:this.name,
						type:this.$parent.labelType
					},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			submit() {
				if(this.nowType == 'add') {
					this.createLabel();
				}else if(this.nowType == 'edit') {
					this.updateLabel();
				}
			},
			cancel(){
				this.label_wrap = false;
				this.name=''
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			handleDeleteAll() {
				this.$rootFunction().rootDeleteAll();
			},
			deleteSubmit() {
				if(this.deleteType == 'delete'){
					let that = this,
						list = [];
					list.push({id:this.transitionRow.id});
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/label/daleteLabel",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'DELETE',
						data:list,
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else{
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/label/daleteLabel",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'DELETE',
						data:this.multipleSelection,
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().deleteResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			handleSelectionChange(val) {
			    this.multipleSelection = [];
			    for(var i = 0;i<val.length;i++){
			        var s={id:val[i].id}
			        this.multipleSelection.push(s)
			    }
			},
			handleCurrentChange (value) {
		        this.currentpage = value;
		        this.getTableList();
		   	},
		   	reBack(){
		   		this.$router.go(-1);
		   	}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted(){
			this.getTableList();
		}
	}
</script>